<template>
  <VueOfficeExcel 
    v-if="tempExcel && !excel" 
    :options="tempOptions" 
    :src="tempExcel" 
    style="width: 0px;height:0px"
  />
  <VueOfficeExcel 
    v-if="excel" 
    :options="options" 
    :src="excel" 
    @rendered="renderedHandler"
    @error="errorHandler" 
    :style="styleObj"
  />
</template>
<script>
export default {
  name: 'Excel'
}
</script>
<script setup>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
import axios from 'axios'
//引入相关样式
import '@vue-office/excel/lib/index.css'
// import * as XLSX from 'xlsx'
import {ref, watch} from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: () => ""
  }
})

const excel = ref('')
const tempExcel = ref('') // 干什么用的呢，实在是解析不了xlsx的文件了，都是预览打印的锅，真不建议在这里去做打印
const options = ref(null)
const tempOptions = ref(null)
const styleObj = ref({})

watch(() => 
  props.modelValue, 
  val => {
    // const width = (window.innerWidth - 210) > 1450 ? (window.innerWidth - 210) : 1450;
    // const width = 2000;
    const width = window.innerWidth - 210
    styleObj.value = {
      width: `${width}px`,
      height: '100vh'
    }
    if (!(val.indexOf('https://') != -1 || val.indexOf('http://') != -1)) {
      val = `${window.location.origin}${val}`;
    } 
    // console.log('excelFileUrl=========>', val);
    // val = 'http://plm.wwchi.com/output/DP010259-01首辦單20240714230449.xls';
    const fileExtArr = val.split('.');
    const fileExt = fileExtArr.length > 0 ? fileExtArr[fileExtArr.length - 1] : '';
    
    tempOptions.value = {
      xls: fileExt == 'xls',       //预览xlsx文件设为false；预览xls文件设为true
      transformData: (workbookData) => {
        // console.log('workbookData=======>', workbookData);
        try {
          const { rows } = workbookData[0];
          const len =  Object.keys(rows).length - 1;
          let tempHeight = 50;
          for (let i = 0; i < len; i++) {
            tempHeight = tempHeight + rows[i].height;
          }
          styleObj.value = { height: `${(len * 21) + tempHeight}px`, width: `${width}px` };

          options.value = {
            showContextmenu: true,
            xls: fileExt == 'xls',       //预览xlsx文件设为false；预览xls文件设为true
            minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
            minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
            widthOffset: 0,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
            heightOffset: 20, //在默认渲染的列表高度上再加 Npx高
            beforeTransformData: (d) => { return d }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
            transformData: (wd) => {
              try {
                // 修改单元格的宽，减去表头的宽度
                const { cols, rows, styles } = wd[0];

                const colLen = Object.keys(cols).length - 1;

                // 这个判断很勉强，为了让里面的内容尽可能显示全，应该拿页面宽度一起综合计算
                // if (colLen > 9) {
                  for (let j = 0; j < styles.length; j++) {
                    try {
                      // console.log(wd[0].styles[j]['font']['size'])
                      if (wd[0].styles[j]['font']['size'] == 8) {
                        wd[0].styles[j]['font']['size'] = 12;
                      } else {
                        wd[0].styles[j]['font']['size'] = 10;
                      }
                      
                    } catch (error) {
                      continue;
                    }
                  }
                // }

                // const data = handleRows(cols, rows);
                // const sum = Object.values(data).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
                let tempTotal = 0;
                for (let i = 0; i < colLen; i++) {
                  tempTotal = tempTotal + cols[i].width;
                }
                for (let i = 0; i < colLen; i++) {
                  // wd[0].cols[i].width = (width - 65) * data[i] / sum;
                  wd[0].cols[i].width = (width - 65) * cols[i].width / tempTotal;
                }
              } catch (error) {
                console.log('error=====>', error)
              }
              // console.log('wd=======>', wd);
              return wd
            }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
          };
          excel.value = val;
        } catch (error) {
          
        }
        return workbookData
      }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
    };

    tempExcel.value = val;
  },
  {immediate: true}
)

// function download(url) {
//   axios.get(url, null, {
//     responseType: 'arraybuffer', // 指定响应类型为arraybuffer
//   }).then((res) => {
//     // res.data 已经是arrayBuffer格式
//     const workbook = XLSX.read(res.data, { type: 'binary' });
//     const worksheet = workbook.Sheets[workbook.SheetNames[0]];
//     const newData = XLSX.utils.sheet_to_json(worksheet, {header:1, raw: false});
//     // newData.length是总共有多少行，表格原始高度大概是20，上面options里给每个单元格额外增加15的高度，所以这里乘以34，也是近似值
//     styleObj.value = { height: `${newData.length * 35}px`, width: '1200px'};

//     excel.value = new Blob([res.data], { type: 'application/vnd.ms-excel' });

//   }).catch((error) => {
//     // 错误处理
//     console.error('请求失败:', error);
//   });

// }


const handleRows = (cols, rows) => {
  let tempObj = {};
  for (let key in cols) {
    if (cols[key]) {
      let tempList = [];
      for (let key2 in rows) {
        try {
          const te = rows[key2]['cells'][key];
          const tempText = te.text.trim();
          tempList.push(tempText.length);
        } catch (error) {
          tempList.push(0);
        } 
      }
      tempObj[key] = handleTextLength(tempList);
    }
  }

  return tempObj;
}

const handleTextLength = (dataArray) => {
  // 初始化最长文本的长度
  let maxLength = 0;

  try {
    // 遍历数组，找出最长的text
    dataArray.forEach((item) => {
      if (item > maxLength) {
        maxLength = item;
      }
    });
  } catch (error) {
    console.log('error======>', error)
  }

  // 这里也是为了尽可能的展示不变形做了勉强的处理
  return maxLength > 15 ? 15 : maxLength;
  // return maxLength;
}

const renderedHandler = (e) => {
  // console.log('renderedHandler=========>', e)
}
const errorHandler = (e) => {
  // console.log('errorHandler=========>', e)
}
</script>
<style>

</style>